<template>
  <div class="fillcontain" v-loading="dataListLoading">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="规则名称">
            <el-input v-model="dataForm.ruleName" placeholder="规则名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getDataList()"></el-button>
            <el-button icon="el-icon-refresh" @click="resetData()"></el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


    <div class="contain">
      <!-- 操作按钮 -->
      <el-row>
        <el-col :span="24" class="pb15 pt5">
          <el-button type="info" plain size="mini" style="margin-left: 10px;" @click="addOrUpdateHandle()">新增</el-button>
        </el-col>
      </el-row>

      <!-- 查询结果列表 -->
      <div class="table_container">
        <!-- 列表 -->
        <el-table
          :data="dataList"
          border
          style="width: 100%; ">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="24">
                  <el-card class="box-card">
                    <div class="rule_content">
                      <el-row >
                        <span class="txt1">如果</span>
                      </el-row>
                      <el-row v-for="(condition,cindex) in scope.row.conditionInfoList">
                        <el-row v-if="cindex==0">
                          <el-col :span="20">
                            <span class="txt3">{{condition.conditionDesc}}</span>
                          </el-col>
                        </el-row>
                        <el-row v-else-if="cindex!=0">
                          <el-col :span="20">
                            <span class="txt2">并且 </span> <span class="txt5">{{condition.conditionDesc}}</span>
                          </el-col>
                        </el-row>
                      </el-row>
                      <el-row >
                        <span class="txt1">那么</span>
                      </el-row>
                      <el-row v-for="(action,aindex) in scope.row.actionInfoList">
                        <el-row >
                          <el-col :span="20">
                            <span class="txt4">{{action.actionDesc}}</span>
                          </el-col>
                        </el-row>
                      </el-row>
                    </div>
                  </el-card>
                </el-col>

              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            prop="ruleCode"
            header-align="center"
            align="center"
            label="规则编号">
          </el-table-column>
          <el-table-column
            prop="ruleName"
            header-align="center"
            align="center"
            label="规则名称">
          </el-table-column>
          <el-table-column
            prop="groupName"
            header-align="center"
            align="center"
            label="所属规则组">
          </el-table-column>
          <el-table-column
            prop="ruleDesc"
            header-align="center"
            align="center"
            label="规则描述">
          </el-table-column>
          <el-table-column
            prop="isEffect"
            header-align="center"
            align="center"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.isEffect | isEffectFilter}}
            </template>
          </el-table-column>


          <el-table-column
            header-align="center"
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isEffect==='1'" type="text" size="small" @click="addOrUpdateHandle(scope.row.ruleId)">
                修改
              </el-button>
              <el-button v-if="scope.row.isEffect==='1'" type="text" size="small" @click="copyData(scope.row.ruleId)">
                复制
              </el-button>
              <el-button v-if="scope.row.isEffect==='1'" type="text" size="small" @click="edit(scope.row)">禁用</el-button>
              <el-button v-if="scope.row.isEffect==='0'" type="text" size="small" @click="edit(scope.row)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <!-- 分页 -->
              <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="page.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.pageSize"
                :total="page.totalPage"
                layout="total, sizes, prev, pager, next, jumper">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>




    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

  </div>
</template>

<script>
    import {pageData, updateData} from '@/api/ruleConfig/rule'
    import AddOrUpdate from './add-or-update'
    import constant from "../../../../../api/constant";

    export default {
        data() {
            return {
                dataForm: {
                    ruleName: '',
                    sceneIdentify: ''
                },
                dataList: [],
                sceneListData: [],
                dataListLoading: false,
                addOrUpdateVisible: false,
                page: {
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0
                }
            }
        },
        components: {
            AddOrUpdate
        },
        activated() {
            this.getDataList()
        },
        methods: {
            copyData(id){
                constant.clearTag(this)
                this.$router.push({path: "/drools-ruleConfig/rule/add-or-update/"+id+"/c"})
            },

            // 启用禁用
            edit(row) {
                let data = row
                if (row.isEffect === '0') {
                    data.isEffect = '1'
                } else {
                    data.isEffect = '0'
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                updateData(JSON.stringify(data)).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)

                    this.getDataList()
                }).catch(err=>{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },
            // 重置查询条件
            resetData() {
                this.dataForm.ruleName = ''
            },
            // 每页数
            sizeChangeHandle(val) {
                this.page.pageSize = val
                this.page.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.page.pageIndex = val
                this.getDataList()
            },


            // 获取数据列表
            getDataList() {
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                let params = {
                    pageNumber: this.page.pageIndex,
                    pageSize: this.page.pageSize,
                    ruleName: this.dataForm.ruleName,
                    sceneIdentify: this.dataForm.sceneIdentify
                }
                pageData(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    this.dataList = res.data.data.list
                    this.page.totalPage = res.data.data.totalCount
                }).catch(err=>{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                constant.clearTag(this)
                if(id){
                    this.$router.push({path: "/drools-ruleConfig/rule/add-or-update/"+id+"/ae",})
                }else{
                    this.$router.push({path: "/drools-ruleConfig/rule/add-or-update",})
                }
            }


        },
        filters: {
            isEffectFilter: function (value) {
                let label = ''
                if (value === '0') {
                    label = '失效'
                } else if (value === '1') {
                    label = "有效"
                }
                return label
            }
        }

    }
</script>
<style>
  body .el-table th.gutter {
    display: table-cell !important
  }

  .txt {
    word-wrap: break-word;
    word-break: normal;
  }

  .box-card .temp_content {
    height: 200px;
    overflow-y: auto
  }

  .col-row {
    padding: 10px
  }
  .rule_content{
    /*border: 1px solid #606266;*/
    /*border-radius: 5px;*/
    padding: 10px;
    max-height: 200px;
    overflow: auto;
  }
  .rule_content .txt1{

  }
  .rule_content .txt2{
    color: #F76565;
    display: inline-block;
  }
  .rule_content .txt3{
    color: #10AC8D;
    text-indent: 38px;
    display: inline-block;
  }
  .rule_content .txt5{
    color: #10AC8D;
    display: inline-block;
  }
  .rule_content .txt4{
    color: #4991DA;
    text-indent: 38px;
    display: block;
  }
</style>
